<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    destroyOnClose
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="roleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="用户名" prop="username">
          <a-input placeholder="请输入用户名" v-model="form.username" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
            通过系统注册的用户，密码默认为123456
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { postAction, getAction } from '@/api/basic';
export default {
  name: 'UserModal',
  components: {},
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: {
        username: '',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名' }],
      },
      url: {
        add: '/users/add',
        edit: '/users/edit',
        queryById: '/users/queryById',
      },
    };
  },
  created() {},
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.model = Object.assign({}, record);
      if (record.id) {
        getAction(this.url.queryById, { id: record.id })
          .then((res) => {
            if (res.success) {
              this.form = Object.assign({}, res.result);
            }
          })
          .finally(() => {
            this.visible = true;
          })
          .catch(() => {
            this.$message.error('服务器出错了，请稍后重试');
          });
      } else {
        this.visible = true;
      }
    },
    close() {
      this.$emit('close');
      this.confirmLoading = false;
      this.form = {
        username: '',
      };
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = '';

          if (!this.model.id) {
            httpurl += this.url.add;
          } else {
            httpurl += this.url.edit;
          }
          let formData = Object.assign({}, this.form);
          //时间格式化

          console.log(formData);
          postAction(httpurl, formData)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.confirmLoading = false;
                that.$emit('ok');
                that.close();
              } else {
                that.$message.warning(res.message);
                that.confirmLoading = false;
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            })
            .catch((res) => {
              this.$message.error('服务器出错了，请稍后重试');
            });
        } else {
          that.confirmLoading = false;
          return false;
        }
      });
    },
    handleCancel() {
      this.close();
    },
  },
};
</script>

<style lang="less" scoped></style>
